import Image from 'next/image'

import pointerIcon from '@/public/pointer_green.png'

interface AnchorTitleProps {
  title: string
  children?: React.ReactNode
}

const AnchorTitle: React.FC<AnchorTitleProps> = (props) => {
  const { title, children } = props
  return (
    <div className='flex justify-between items-center'>
      <div className='flex items-center'>
        <div className='relative w-[0.9375rem] h-[0.75rem] lg:w-[1.0625rem] lg:h-[0.8125rem] 2xl:w-[1.59375rem] 2xl:h-[1.21875rem]'>
          <Image src={pointerIcon} alt='pointer icon' fill />
        </div>
        <div className='w-2 2xl:w-3' />
        <div className='uppercase text-[1rem] leading-[1rem] lg:text-[1.1875rem] lg:leading-[1.1875rem] 2xl:text-[1.78125rem] 2xl:leading-[1.78125rem] font-bold'>
          {title}
        </div>
      </div>
      {children}
    </div>
  )
}

export default AnchorTitle
